<template>
    <el-container>
    <el-header>
    <table width="800" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#0d73bd">
        <tr>
            <td width="269"><img height="65" src="@/assets/img/pic_top_01.gif" width="269"></td>
            <td width="484" align="right"><font color="#000099"><img src="@/assets/img/044.gif" width="466" height="54">&nbsp;</font></td>
        </tr>
    </table>
    <table width="800" border="1" align="center" bordercolor="#5e739d" bgcolor="#5e739d">
        <tr>
            <td width="793" height="20">
                <div>
                    <el-link type="primary" href="/">网站首页</el-link>&nbsp;
                    <el-link type="primary" href="/#/zysxt">重要水系图</el-link>&nbsp;
                    <el-link type="primary" href="/#/sksx">沿线水库</el-link>&nbsp;
                    <el-link type="primary" href="/#/fhwj">防洪文件</el-link>&nbsp;
                    <el-link type="primary" href="/#/fhkj">防洪科技</el-link>&nbsp;
                    <el-link type="primary" href="/#/xqzb">汛前准备</el-link>&nbsp;
                    <el-link type="primary" href="/#/fhyb">防洪月报</el-link>
                </div>
            </td>
        </tr>
    </table>
    </el-header>

    <el-main>
    <br><br><center>防洪日简报</center>
    <table width="760" border="0" cellspacing="0" cellpadding="0" align="center" height="1">
        <tr><td bgcolor="#CCCCCC"></td></tr>
    </table>
        <br>

        <div>
            <el-input placeholder="日期" v-model="searchData" clearable style="width: 200px;margin-right: 10px"></el-input>
            <el-button @click="filterData()" class="dalfBut" icon="el-icon-search">查询</el-button>
            <el-button @click="reset()" class="dalfBut" icon="el-icon-refresh">刷新</el-button>
        </div>

        <el-table :data="fileList.filter(data => !search || data.ddate.toLowerCase().includes(search.toLowerCase()))"
                  stripe
                  style="width: 670px;margin: auto"
                  height="420px"
                  current-row-key="id">
            <el-table-column prop="fileName" label="文件名" width= "200" align="center">

                <!-- 文件下载 -->
                <template slot-scope="scope">
                    <a @click="downloadFile(scope.row.filePath, scope.row.fileName, scope.row.id)" style="text-decoration: underline; color: blue;cursor: pointer;">{{ scope.row.fileName }}</a>
                </template>

            </el-table-column>
            <el-table-column prop="ddate" label="日期" width= "300" align="center"></el-table-column>
            <el-table-column prop="userId" label="上传者" width= "150" align="center"></el-table-column>
        </el-table>

        <!--分页组件-->
        <div class="pagination-container">
            <el-pagination
                    class="pagiantion"
                    @current-change="handleCurrentChange"
                    :current-page="pagination.currentPage"
                    :page-size="pagination.pageSize"
                    layout="total, prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>
    </el-main>

    <el-footer>
    <table width="800" border="0" cellspacing="0" cellpadding="0" align="center" height="30">
        <tr>
            <td bgcolor="#5E739D" valign="middle">
                <div align="center">
                    <span>
                        <font color="#000000">
                            <a href="/#/login"><font color="#66FF33">管理维护</font></a>
                            &nbsp;©Copyright 2022-2023<b>&nbsp;上海局集团公司防洪办</b>&nbsp;all right reserved
                        </font>
                    </span>
                </div>
            </td>
        </tr>
     </table>
    </el-footer>
    </el-container>
</template>

<script>
export default {
    name: "FHrjb",
    data() {
        return {
            //文件信息
            fileList: [],
            //分页相关模型数据
            pagination: {
                currentPage: 1,//当前页码
                pageSize:10,//每页显示的记录数
                total:0,//总记录数
                //date: "",//查询条件
            },
            search:"",
            searchData:""
        };
    },
    methods: {
        //获取所有文件
        getAll(){
            //拼接查询条件参数
            let param="";
            //param +="&date="+this.pagination.date;
            param +="&fClass=防洪日简报";
            //发送异步请求
            this.$axios.get("/file/fileList?curpage="+this.pagination.currentPage+"&pagesize="+this.pagination.pageSize + param).then((res)=>{
                this.pagination.total = res.data.data.total;
                this.fileList = res.data.data.records;
            });
        },
        //切换页码
        handleCurrentChange(currentPage) {
            //修改页码值为当前选中的页码值
            this.pagination.currentPage = currentPage;
            //执行查询
            this.getAll();
        },
        filterData(){
            let a = this.searchData;
            this.search = a;
        },
        reset() {
            location.reload();
        },
        downloadFile(url, fileName, fileId){
            let link = document.createElement('a');
            link.style.display = 'none';
            link.href = VUE_APP_URL.BASE_URL+ '/file/downloadFile?id='+fileId;
            document.body.appendChild(link);
            link.click();
        }
    },
    mounted() {
        this.getAll();
    }
}
</script>

<style>

</style>
